<template>
    <div class="login">
        <div class="login-container">
            <div class="login-left">
                <!-- <img src="../../assets/img_left.png" alt=""> -->
                <div class="login-user">
                    <input type="checkbox" v-model="checkbox" name="" id="">
                    我已阅读并接受
                    <a 
                    	v-for='(argument,index) in agreement_list'
                    	v-if="argument.agreement_alias == 'register'"
                    	:key='index'
                    	:href="argument.agreement_detail_url" target="_blank">《用户协议》</a>
                </div>
            </div>
            <form class="login-right">
                <span class="remove" @click="togglePopup">X</span>
                <div>
                    <div class="row">
                        <input 
                            type="text" 
                            @focus="focusInput(1)" 
                            @blur="blurInput"
                            v-model="mobile"
                            maxlength="11">
                        <label :class="{focus: active===1||mobile!=''}" for="">手机号</label>
                    </div>
                    <div class="row">
                        <input 
                            type="text" 
                            @focus="focusInput(2)" 
                            @blur="blurInput"
                            v-model="imgCode">
                        <label :class="{focus: active===2||imgCode!=''}" for="">图形验证码</label>
                        <img v-bind:src="imgsrc" alt="" @click='getImgCode()'>
                    </div>
                    <div class="row">
                        <input 
                        	class="code-input"
                            type="text" 
                            @focus="focusInput(3)" 
                            @blur="blurInput"
                            v-model="textCode">
                        <label :class="{focus: active===3||textCode!=''}" for="">验证码</label>
                        <span @click="getCode">{{code=='获取验证码'?code:code+'秒'}}</span>
                    </div>
                    <p>*未注册过的用手机号将自动创建为医汇云账号</p>
                    <div>
                        <a @click="loginIn">登录</a>
                        <span class="error" v-if="error!==''">{{error}}</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex';
    // import public_url from '@/utils/ajax'
    import { setCookie, getCookie } from '@/utils/common';
    // import $ from 'jquery';
    export default {
        data(){
            return {
                active: '',
                mobile: '',
                imgCode: '',
                textCode: '',
                code: '获取验证码',
                error: '',
                checkbox: true,
                imgsrc:'',
                agreement_list: '',//协议列表
            }
        },
        created(){
        	this.getImgCode();
        	this.getAgreementList();
        },
        methods: {
            ...mapMutations(['togglePopup','login']),
            //input光标获取
            focusInput(active) {
                this.error = '';
                this.active = active;
            },
            //input失去光标
            blurInput() {
                this.active = '';
            },
            //获取验证码
            getCode() {
                if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.mobile))) return this.error='手机号不正确';
                if ( this.code != '获取验证码' ) return;
                this.Server.sendCaptcha({
                	mobile: this.mobile,
                }).then(res => {

                })
                this.code = 90;
                let time = setInterval(() => {
                    this.code -=1;
                    if ( this.code === 0 ) {
                        this.code = '获取验证码';
                        clearInterval(time);
                    }
                },1000)
            },
            //登录
            loginIn() {
            	const secret_key = 'ca72a0b32dd624014e49805c9f51fa4e';
            	function secretToken(data) {
				    var obj = {};
				    var arr = [];
				    var token = '';
				    for (let i in data) {
				        arr.push(i)
				    }
				    arr.sort();
				    for (let x = 0; x < arr.length; x++) {
				        obj[arr[x]] = data[arr[x]]
				    };
				    for (let y in obj) {
				        if (token == '') {
				            token = token + y + '=' + obj[y];
				        } else {
				            token = token + '&' + y + '=' + obj[y];
				        }
				    };
				    token += secret_key;
				    obj['token'] = hex_md5(token);
				    return obj;
				}
                if (!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.mobile))) return this.error='手机号不正确';
                if(this.imgCode == '') return this.error = '图形验证码不正确';
                if(this.textCode == '') return this.error = '验证码不正确';
                if(!this.checkbox) return this.error = '请阅读并勾选用户协议';
                //执行ajax；
                this.Server.captchaLogin({
                	mobile: this.mobile,
                	captcha: this.textCode,
                }).then(res => {
                	setCookie([['user',JSON.stringify(res.data)]]);
                	this.togglePopup();
                	this.login();
                })
            },
            getImgCode() {
            	this.Server.verify().then(res => {
					this.imgsrc = public_url+'/account/verify/t='+Math.random();
            	})
            },
            getAgreementList(){
            	this.Server.getAgreementList().then(res => {
            		this.agreement_list = res.data.agreement_list;
            	})
            }
        }
    }
</script>
<style lang="less" scoped>
    .login{
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0,0,0,.7);
        z-index: 999;
        &-container{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 700px;
            height: 450px;
            margin-left: -350px;
            margin-top: -225px;
            background: #fff;
            border-radius: 4px;
            z-index: 1000;
            overflow: hidden;
        }
        &-left{
            position: relative;
            float: left;
            width: 350px;
            height: 100%;
            text-align: center;
            // background-image: url('../../assets/img_left.png');
            background: 100%;
        }
        &-right{
            p{
                color: #cecece;
                font-size: 10px;
                margin-top: -19px;
            }
            a{
                display: block;
                width: 100%;
                height: 40px;
                background: #a07ed9;
                text-align: center;
                line-height: 40px;
                color: #fff;
                font-size: 14px;
                border-radius: 2px;
                border: none;
                margin-top: 30px;
            }
            .error{
                color: #FF86a2;
                font-size: 10px;
                line-height: 14px;
            }
            .remove{
                position: absolute;
                right: 15px;
                top: 15px;
                font-size: 20px;
                cursor: pointer;
            }
            .row{
                width: 100%;
                height: 30px;
                margin-bottom: 30px;
                border-bottom: 1px solid #f0f0f0;
                font-size: 14px;
                position: relative;
                span{
                    cursor: pointer;
                    position: absolute;
                    top: 4px;
                    right: 0;
                    border-left: 1px solid #dedede;
                    padding-left: 10px;
                    color: #a07ed9;
                }
                label{
                    position: absolute;
                    left: 0;
                    top: 5px;
                    &.focus{
                        top: -20px;
                        font-size: 12px;
                        color: #999; 
                        transition: all .5s ease;
                    }
                }
                .code-input{
                	width: 180px;
                }
                input{
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #4a4a4a;
                    border: none;
                    border-bottom: 1px solid #f0f0f0;       
                    outline: none;         
                }
                img{
                    position: absolute;
                    right: 0;
                    width: 100px;
                    height: 30px;
                    top: 0;
                }
            }
            >div{
                padding: 100px 40px;
                margin-left: 350px;
            }
        }
        &-user{
            position: absolute;
            bottom: 15px;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            a{
                color: #fff;
                text-decoration: underline;
            }
            input{
                vertical-align: middle;
            }
        }
    }
</style>
